<template>
  <div>
    <div class="title">
      <h1>防污措施</h1>
    </div>
    <div class="content">

      <el-form ref="form" :model="form" label-width="200px">
        <el-col :span="8"><div class="grid-content bg-purple">排入水中的化学物质</div></el-col>
        <br>
        <br>
        <el-form-item label="措施效率：" style="width: 600px;font-size: 8ex" prop="waterFwcs"
                      :rules="[
            {required: true, message: '措施效率不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.waterFwcs" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
        <el-col :span="8"><div class="grid-content bg-purple">排入大气中的化学物质</div></el-col>
        <br>
        <br>

        <el-form-item label="措施效率：" style="width: 600px;font-size: 8ex" prop="airFwcs"
                      :rules="[
            {required: true, message: '措施效率不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.airFwcs" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>

      </el-form>

      <br>
      <br>
      <el-button style="margin-top: 12px;" @click="goBack">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="sendAntifoulingMeasure">计算</el-button>
    </div>

  </div>

</template>

<script>
  import DirectUsage from "./UsageParameters/DirectUsage";
  import IndirectUsage from "./UsageParameters/IndirectUsage";
  import BaseInformation from "./BaseInformation";
  export default {
    name: "AntifoulingMeasure",
    data(){
      return {
        form:{
          waterFwcs:"",
          airFwcs:"",
        },
      }
    },
    watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
      'form.waterFwcs':function (newVal, oldValue) {
        if(parseFloat(newVal) < 0 || parseFloat(newVal) > 1){
          this.form.waterFwcs = ''
          this.$message({
            message: "数值只能在0-1之间",
            type: 'warning'
          });
        }
      },
      'form.airFwcs':function (newVal, oldValue) {
        if(parseFloat(newVal) < 0 || parseFloat(newVal) > 1){
          this.form.airFwcs = ''
          this.$message({
            message: "数值只能在0-1之间",
            type: 'warning'
          });
        }
      }
    },
    methods:{
      goBack(){
        this.$emit('goBack');
      },
      sendAntifoulingMeasure(){
        if(this.form.waterFwcs !=''){
         if(this.form.airFwcs !=''){
           //let flag = {flag:'1'};
           let antifoulingMeasure = {waterFwcs:this.form.waterFwcs, airFwcs:this.form.airFwcs};
           this.$store.commit("setAntifoulingMeasure",antifoulingMeasure)
           this.$emit('listenChild');
         }
         else{
           this.$message("废气防污措施不能为空，没有则填0")
         }
        }
        else{
          this.$message("废水防污措施不能为空，没有则填0")
        }
      },

    },
    components:{
      DirectUsage,
      IndirectUsage,

    }
  }
</script>

<style scoped lang="scss">
  .title{
    position:absolute;
    left:0px;
  }
  .content{
    position:absolute;
    top:100px;
    left:20%;
    right:25%;
  }
</style>
